$(function(){
    //店铺
    let shop = document.querySelector("#city>.cityinfo>.JD");
    let shoplist = document.querySelector("#citynav>.infonav");
    
    var flag = true;
    var shopid;
    var areaid;
    shop.onclick=function(){
        let shopstr = "";
        fetch("http://chst.vip:1234/api/getgsshop")
        .then(body=>body.json())
        .then(res=>{
            console.log(res)
            res.result.forEach(item => {
            shopstr += `<li shopId=${item.shopId}>${item.shopName}</li>`
            })
            shoplist.innerHTML=shopstr;
            if(flag){
                shoplist.style.display = 'block';
                flag = false;
            }else{
                shoplist.style.display = 'none';
                flag = true
            }
            var aShopLi = document.querySelectorAll('#citynav .infonav li');
            for(var i=0;i<aShopLi.length;i++){
                aShopLi[i].onclick = function(){
                    var ofirst = document.querySelector('#city .cityinfo .JD .jd');
                    ofirst.innerHTML = this.innerHTML;
                    shoplist.style.display = 'none';
                    flag = true;
                    shopid = this.getAttribute('shopId')

                    mainInfo(shopid,areaid)
                }
            }
        })  
    }

    //区域
    let area = document.querySelector("#city>.cityinfo>.HN>.hn");
    
    area.onclick=function(){
        let areastr = "";
        fetch("http://chst.vip:1234/api/getgsshoparea")
        .then(body=>body.json())
        .then(res=>{
            console.log(res);
            res.result.forEach(item=>{
                areastr += `<li areaId=${item.areaId}>${item.areaName}</li>`
            })
            shoplist.innerHTML=areastr;
            if(flag){
                shoplist.style.display = 'block';
                flag = false;
            }else{
                shoplist.style.display = 'none';
                flag = true
            }
            var aAreaLi = document.querySelectorAll('#citynav .infonav li');
            for(var i=0;i<aAreaLi.length;i++){
                aAreaLi[i].onclick = function(){
                    var ofirst = document.querySelector('#city .cityinfo .HN .hn');
                    ofirst.innerHTML = this.innerHTML;
                    shoplist.style.display = 'none';
                    flag = true;
                    areaid = this.getAttribute('areaId')

                    mainInfo(shopid,areaid)
                }
            }
        })
    }

    

})
//商品列表
function mainInfo(shopid=0,areaid=0){
    let product = document.querySelector("#product>.ulbox")
    let prostr = ""
    fetch(`http://chst.vip:1234/api/getgsproduct?shopid=${shopid}&areaid=${areaid}`)
    .then(body=>body.json())
    .then(res=>{
        console.log(res);
        res.result.forEach(item=>{
            prostr +=`
                    <li class="libox">
                        <a href="#">
                        <img src="${item.productImg}">
                        <div class="title">${item.productName}</div>
                        <p class="price">${item.productPrice}</p>
                        </a>
                    </li>
                    `
        })
        product.innerHTML=prostr
    })
}
mainInfo()